<template>
    <div class="newsinfo-container">
        <h1 class="newsInfo-title">{{ newsinfo.title }}</h1>
        <p class="mui-ellipsis">
            <span>发表时间: {{ newsinfo.add_time | dataFormat }} </span>
            <span>点击: {{ newsinfo.click }}次</span>
        </p>
        <div class="newsInfo-content" v-html="newsinfo.content"></div>


        <!-- 评论部分 -->
        <comment-box></comment-box>
    </div>
</template>
<script>
import { Toast } from "mint-ui"
//1.导入 评论子组件
import comment from "../subcomponents/comment.vue"
export default {
    data(){
        return {
            //通过$route.params.id拿到当前url传入的id值
            id: this.$route.params.id,//将id挂载到data上，方便调用
            newsinfo: {}//新闻对象

        }
    },
    created(){
        this.getNewsInfo()
    },
    methods: {
        getNewsInfo(){
            this.$http.get('../../api/newsdetails.json').then(result =>{
                if(result.body.status===0){
                
                    this.newsinfo=result.body.message[this.id-1]//this.id-1在message数组中找到与id对应的对象

                }else{
                    Toast("获取新闻失败")
                }
            })
        }
    },
    components: {//2.用来注册子组件
    "comment-box": comment

    }
}
</script>
<style lang="less" scoped>
    .newsInfo-title{
        font-size: 16px;
        color: black;
        text-align: center;
        line-height: 20px;
    }
    .mui-ellipsis{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #cccccc;
        padding: 0 10px;
    }
    .newsInfo-content{
        padding: 0 10px;
        
    }
    .newsInfo-content p{
        font-size: 12px;
    }
</style>


